<template>
	<view class="content">
		<view class="box">
			<view class="subclass" v-for="(item,index) in arr" :key="index" :style="{left:item.left+ 50 + 'rpx',top:item.top+ 100 + 'rpx'}" @click="ItemClick(index)">
				<view :class="'imgbox'+index" >
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<text>{{item.content}}</text>
			</view>
		</view>
		<view class="bg" :style="{display:isTrue?'block':'none'}" @click="submit">
			<view class="content">
				<image src="../../static/logo.png" mode=""></image>
				<text>冥想有很多益处，特别是缓和情绪、<br>保持心理健康方面~</text>
				<button>我知道了</button>
			</view>
		</view>
	</view>
</template>



<script>
	let max = 45;
	let min = 25;
	let windowWidth = 0;
	let windowHeight = 0;
	let clientWidth = 0;
	export default {
		data() {
			return {
				list:[{content:'喝 8 杯水'},{content:'不吃外卖'},{content:'不久坐'},{content:'步行超过 1 千米'},{content:'23 点之前睡觉'}],
				arr : [],
				isTrue:false,
			}
		},
		onShow() {
			var arr =[];
			wx.getSystemInfo({
				success: (res) => {
					windowWidth=res.windowWidth;
					windowHeight=res.windowHeight;
					clientWidth = res.clientWidth;
					// console.log(res,'ppp');
					this.resizeRoot(750,res)
					for(var i=0;i<5;i++){
						var left = Math.floor(Math.random()*windowWidth);
						var top = Math.floor(Math.random()*windowHeight);
						let obj = {
							left : left,
							top:top,
							index:i,
							content : this.list[i].content
						};
						
						if(arr.length < 5){
							arr.push(obj);
							if(i == this.list.length -1) this.arr = arr ;
						}else{
							return;
						}
					}
				}
			})
			console.log(windowWidth,windowHeight,'hhh');
			
	// 		wx.onWindowResize((e)=>{
	// 			// console.log(e,'eee');
	// 			if(e.size.windowWidth < windowWidth || e.size.windowHeight <e.windowHeight) return ;
	// 			windowHeight = e.size.windowHeight - max;
	// 			windowWidth = e.size.windowWidth - max;
	// 			// console.log(windowWidth,windowHeight);
	// 			for(var i=0;i<5;i++){
	// 				var left = Math.floor(Math.random()*windowWidth);
	// 				var top = Math.floor(Math.random()*windowHeight);
					
	// 				let obj = {
	// 					left : left,
	// 					top:top,
	// 					index:i,
	// 					content : this.list[i].content
	// 				};
					
	// 				if(arr.length < 5){
	// 					arr.push(obj);
	// 					if(i == this.list.length -1) this.arr = arr ;
	// 				}else{
	// 					return;
	// 				}
	// 			}
				
	// 			console.log(this.arr,'标记1');
	// 		});
	// 		console.log(this.arr,'jkk');
	
		},
		
		methods: {
			if_Availability(left,top,arr){
				// console.log(left,top,arr,'标记2');
				
				let status = true;
				for(let i = 0;i<5;i++){
					let y_left = Math.abs(arr[i].left - left);
					let y_top = Math.abs(arr[i].top - top);
					
					if(y_left < max && y_top < max){
						status = false;
					}
				}
				return status;
			},
			resizeRoot(width,html){
				console.log(html,'kkk');
				let calcRem = function() {
				    let w = html.clientWidth;
				    if (w < 320) {
				        html.fontSizeSetting.fontSize = '10px';
				    } else if (w <= 640) {
				        html.fontSizeSetting.fontSize = w / 32 + 'px';
				    } else {
				        html.fontSizeSetting.fontSize = '20px';
				    }
				}
			},
			ItemClick(index){
				this.isTrue = true;
			},
			submit(){
				this.isTrue = false;
			}
		}
	}
</script>

<style scoped lang="less">
	html,body{
		width: 100%;
		height: 100%;
		// background-color: #104082;
	}
	.content{
		// background-color: #104082;
		position: relative;
		.box{
			.subclass{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 18px;
				// color: #fff;
				font-weight:700;
				border-radius: 50%;
				width: 130px;
				position: relative;
				view{
					background: #6e00a5;
					width: 90px;
					height: 90px;
					border-radius: 50%;
					position: relative;
					image{
						width: 50px;
						height: 50px;
						border-radius: 50%;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}
				.imgbox0{
					animation: b0 5s ease-in alternate infinite;
				}
				@keyframes b0{
					0%{
						transform: scale(1);
					}100%{
						transform: scale(.85);
					}
				}
				.imgbox1{
					animation: b1 4s ease-in alternate infinite;
				}
				@keyframes b1{
					0%{
						transform: scale(.8);
					}100%{
						transform: scale(1);
					}
				}
				.imgbox2{
					animation: b2 5.2s ease-in alternate infinite;
				}
				@keyframes b2{
					0%{
						transform: scale(1);
					}100%{
						transform: scale(.75);
					}
				}
				.imgbox3{
					animation: b3 6s ease-in alternate infinite;
				}
				@keyframes b3{
					0%{
						transform: scale(.9);
					}100%{
						transform: scale(.75);
					}
				}
				.imgbox4{
					animation: b4 7.2s ease-in alternate infinite;
				}
				@keyframes b4{
					0%{
						transform: scale(.9);
					}100%{
						transform: scale(1.1);
					}
				}
			}
		}
	}
	.bg{
		background-color: rgb(#5a5a5a,.8);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		// display: flex;
		display: none;
		justify-content: center;
		align-items: center;
		.content{
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 25%;
			left: 0;
			bottom: 0;
			right: 0;
			image{
				width: 80px;
				height: 80px;
			}
			text{
				padding:20px 30px;
				font-size: 15px;
				text-align: center;
			}
			button{
				color: #fff;
				border: 1px solid #fff;
				width: 200px;
				border-radius: 25px;
				outline: none;
				background: rgba(0,0,0,0);
			}
		}
	}
</style>
